<template>
  <div class="touxiang">
    <span class="tou1">
      <img src="./img/name.jpg" />
    </span>
    <span class="name22">exacatly</span>
    <!-- 添加菜谱描述 -->

    <div class="caiputell1">
      <input
        type="text"
        class="caiputell1small"
        placeholder="点击添加菜谱描述"
        v-model="shuruvalue"
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      shuruvalue: "",
    };
  },
  methods: {},
  components: {},
  watch: {
    shuruvalue() {
      this.$emit("update:value", this.shuruvalue);
    },
  },
  mounted() {
    // this.$axios("/hxs/tuijianshangpin", {
    //   params: { classer1: "饼", classer2: "早餐", classer3: "奶茶" },
    // }).then((res) => {
    //   console.log(res);
    //   this.arr4 = res.data;
    // });
  },
};
</script>

<style lang="scss" scoped>
.touxiang {
  width: 1000px;
  margin: 0 auto;
}
.tou1 {
  display: inline-block;
  // width: 300px;
  height: 80px;
  margin-top: 12px;
  margin-left: 12px;
  // background-color: rgb(221, 187, 187);
  margin-bottom: 6px;
}
.name22 {
  display: inline-block;
  margin-top: 7px;
  margin-left: 12px;
  font-size: 18px;
  text-align: center;
  height: 80px;
}
.caiputell1 {
  width: 664px;
  height: 124px;
}
.caiputell1small:hover {
  background-color: rgba(252, 242, 156, 0.4);
}
.caiputell1small {
  width: 100%;
  height: 100%;
  margin-top: -6px;
  background-color: #f5f6f5;
  border: 0;
}
</style>
